<script setup lang="ts">

</script>

<template>
  <div class="box">
    <img class="error-image" src="../../assets/images/error_images/404.png" />
    <button class="home-button" @click="$router.push('/home')">点我去首页</button>
  </div>
</template>

<style scoped lang="scss">
.box {
  width: 100vw;
  height: 100vh;
  background: skyblue;
  display: flex;
  flex-direction: column; /* 垂直排列 */
  justify-content: center; /* 水平方向居中 */
  align-items: center;    /* 垂直方向居中 */
  text-align: center;     /* 文字居中 */
}

.error-image {
  width: 80%; /* 使图片自适应宽度 */
  max-width: 400px; /* 设置最大宽度 */
  margin-bottom: 20px; /* 图片和按钮之间的间隔 */
}

.home-button {
  padding: 10px 20px; /* 按钮内边距 */
  font-size: 18px;     /* 字体大小 */
  color: white;        /* 字体颜色 */
  background-color: #007bff; /* 背景颜色 */
  border: none;        /* 去掉边框 */
  border-radius: 5px;  /* 圆角 */
  cursor: pointer;      /* 鼠标样式 */
  transition: background-color 0.3s; /* 添加背景颜色过渡 */
}

.home-button:hover {
  background-color: #0056b3; /* 悬停效果 */
}

/* 媒体查询：小屏幕优化 */
@media (max-width: 600px) {
  .home-button {
    font-size: 16px; /* 小屏幕上的按钮字体 */
    padding: 8px 16px; /* 小屏幕上的按钮内边距 */
  }
}
</style>
